<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0;
				background: #222;
				height: 100vh;
			}
			div{
				width: 300px;
				border: 10px solid #666;
				background: #fff;
				padding:15px;
			}
		</style>
	</head>
	<body>
		<div>
			<span id="content">随着自由贸易港建设进程的加快，海南在制度创新、
			服务业开放、产业创新等方面进行了重要的试验和探索。
			海口市政府服务中心设置“12345海口政府服务热线”，
			创造性地运用“12345+网格化”服务方式，将“放管服”改革的每一步都落在实处。
			海口复兴城以数字经济为发展重点，打造国际离岸创新创业示范基地。
			而博鳌乐城国际医疗旅游先行区则在加快药品、器械的进口审批速度，实现医疗药械进口审批“先行先试”
			</span>
			<a href="#" id="btn"><<< 收缩</a>
		</div>
		
		<script>
			let oSpan = document.getElementById('content');
			let oBtn = document.getElementById('btn');
			let oldContent = oSpan.innerHTML;
			let onOff = true;
			oBtn.onclick = function(){
				if(onOff){
					oSpan.innerHTML = oldContent.substring(0,18);
					oBtn.innerHTML = '>>> 展开';
				}else{
					oSpan.innerHTML = oldContent;
					oBtn.innerHTML = '<<< 收缩';
				}
				onOff = !onOff;
			}
		</script>
	</body>
</html>
